<template>
  <footer class="footer-nav">
      <nav>
          <router-link to="/home">
          首页
          
          </router-link>
           <router-link to="/classify" >
          分类
          </router-link>
           <router-link to="/shopping" >
          购物车
          <span class="num">{{count}}</span>
          </router-link>
           <router-link to="/my" >
          我的
          </router-link>
      </nav>
  </footer>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    name:'FooterNav',
    computed: {
      ...mapGetters('car',['count'])
    },
}
</script>

<style lang="scss" scoped>
.footer-nav{
    @include wh(100%,auto);
    @include border1px(top);
    position: fixed;
    bottom: 0;
    nav{
        @include wh(100%,auto);
        @include flex(row,center,center);
        a{
            @include flex(column,center,center);
            color:$text-default-color;
            font-size: $font-size-s;
            text-align: center;
            flex: 1;
            width: 0;
            padding: 10px;
            position: relative;
        }
        .num{
            position: absolute;
            right: 0;
            top: 0;
            background: $base-color;
            color: #fff;
            height: 40px;
            min-width: 40px;
            border-radius:40px;
        }
    }
}

</style>